<script setup lang="ts">
import { ref, onMounted } from 'vue'
import G6 from '@antv/g6'
import Mock from '@/views/mock/day1'
import insertCss from 'insert-css'

// define the CSS with the id of your menu

insertCss(`
  .g6-component-contextmenu {
    position: absolute;
    list-style-type: none;
    padding: 10px 8px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #545454;
  }
  .g6-component-contextmenu h3 {
    font-size: 16px;
  }
  .g6-component-contextmenu li {
    cursor: pointer;
		list-style-type:none;
    list-style: none;
    margin-left: 0px;
    font-size: 14px;
    line-height: 24px;

  }
  .g6-component-contextmenu li:hover {
    color: #000;
    font-weight: bold;
  }
`)
let graph: any = null
const mountNode = ref()
const nodeIdGroup = ref([])

let addedCount = 1
function createDom() {
  const selector = document.createElement('select')
  selector.id = 'selector'
  const selection1 = document.createElement('option')
  selection1.value = 'default'
  selection1.innerHTML = '默认模式'
  const selection2 = document.createElement('option')
  selection2.value = 'addNode'
  selection2.innerHTML = '点击选中节点，再次点击节点或点击 Canvas 取消选中状态'
  selector.appendChild(selection1)
  selector.appendChild(selection2)
  mountNode.value.appendChild(selector)

  const tipDiv = document.createElement('div')
  tipDiv.innerHTML = `右键添加子节点<br>切换模式 按住 Shift 键选择多个节点删除  <br> 鼠标移动到节点上可以查看节点信息 `
  mountNode.value.appendChild(tipDiv)
  selector.addEventListener('change', (e) => {
    const value = e.target.value
    // change the behavior mode
    graph.setMode(value)
  })
}

const init = () => {
  createDom()
  const contextMenu = new G6.Menu({
    getContent(evt: any) {
      const { label } = evt.item.getModel()
      return `
      <h3>${label}</h3>
      <ul>
        <li title='1'>添加子节点</li>
        <li title='2'>删除节点</li>
      </ul>`
    },
    handleMenuClick: (target, item) => {
      const { label, id, x = 100, y } = item.getModel()
      const TitleValue = target.getAttribute('title')

      if (TitleValue === '1') {
        const newNode = String(`node-${addedCount}`)
        const childNodeModel = {
          id: newNode,
          label: `${id}-${newNode}`,
          x: x + addedCount * 150,
          y
        }

        // 添加子节点
        graph.addItem('node', childNodeModel)
        // 添加边的数据
        const newEdge = {
          id: `node-edge-${addedCount}`,
          source: id, // 源节点的id
          target: newNode // 目标节点的id
        }

        // 添加边
        graph.addItem('edge', newEdge)
        addedCount++
      } else {
        if (nodeIdGroup.value.length > 0) {
          nodeIdGroup.value.forEach((id) => {
            graph.removeItem(id)
          })
        } else {
          graph.removeItem(id)
        }
      }
      graph.fitView()
    },
    // offsetX and offsetY include the padding of the parent container
    // 需要加上父级容器的 padding-left 16 与自身偏移量 10
    offsetX: 16 + 10,
    // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
    offsetY: 0,
    // the types of items that allow the menu show up
    // 在哪些类型的元素上响应
    itemTypes: ['node']
  })

  // 定义数据、实例化图、加载数据、渲染图
  graph = new G6.Graph({
    container: mountNode.value,
    width: document.documentElement.clientWidth * 0.6,
    height: document.documentElement.clientHeight * 0.7,
    defaultNode: {
      size: 80
    },
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
      addNode: ['click-select']
    },
    defaultEdge: {
      style: {
        lineWidth: 2,
        endArrow: {
          path: G6.Arrow.vee(5, 7, 0)
        }
      }
    },
    plugins: [contextMenu]
  })

  graph.data(Mock) //  加载数据
  graph.render() // 渲染图

  graph.on('nodeselectchange', (e: any) => {
    // 当前操作的 item
    console.log(e.target)
    // 当前操作后，所有被选中的 items 集合
    const nodeIds: [] = e.selectedItems.nodes.map((item: any) => item.getModel().id)
    nodeIdGroup.value = nodeIds
    // 当前操作时选中(true)还是取消选中(false)
    console.log(e.select)
  })
}

onMounted(() => {
  init()
})
</script>
<template>
  <div ref="mountNode" class="container" />
</template>

<style lang="scss" scoped>
.container {
  border: 4px solid #5b8ff9;
}
</style>
